<template>
  <div class="cart">
    <div
      class="bot_box"
      v-show='flag'
      key="1"
    >
      <transition
        name="fly"
        appear
      >
        <div
          class="black_whitebox"
          v-show='flag'
        >
          <div class="address">
            <div
              class="details_box"
              v-if="NOaddress"
            >
              <span>姓名：<i>{{ address.name }}</i></span>&ensp;
              <span>电话：<i>{{ address.tel }}</i></span>
              <div>地址：<i>{{ address.address }}</i></div>
            </div>
            <template v-else> 暂无地址数据</template>
            <div class="goaddress">
              <van-button
                type="warning"
                text="去选择地址"
                size="small"
                @click="$router.push('/address')"
              />
            </div>
          </div>
          <div class="total_num">
            <div class="sumgoods">共选择：<i>{{ allnum }}</i>件商品&ensp;&ensp;&ensp;总价：<i>{{ total }}</i>元
            </div>
          </div>
          <div class="lastbtn">
            <van-button
              type="primary"
              block
              round
              @click="OK"
            >支付
            </van-button>
            <button
              class="out_box"
              @click='flag=false'
            >X
            </button>
          </div>
        </div>
      </transition>
    </div>
    <div
      v-if="goodslist.length>=1"
      class="big_box"
    >
      <div
        class="goods_box"
        v-for="item in goodslist"
        :key='item.id'
      >
        <van-checkbox
          v-model="item.checked"
          class="btnlist"
        ></van-checkbox>
        <van-card
          class="slice"
          :num="item.count"
          :price="item.price+'.00'"
          :title="item.title"
          :thumb="item.img"
        >
          <template #footer>
            <van-stepper
              v-model="item.count"
              :name='item.id'
              @change='newscount'
            />
          </template>
        </van-card>
      </div>
    </div>
    <div
      v-else
      class="gobuy"
    >
      暂无商品 快去选购吧
      <van-button
        type="info"
        block
        @click="$router.push('/home')"
      >Go! Home
      </van-button>
    </div>
    <div v-if="goodslist.length>=1">
      <van-submit-bar
        :price="total * 100"
        button-text="结算"
        @submit="onSubmit"
        button-color='rgb(1,139,213)'
      >
        <van-checkbox v-model="allchecked">全选</van-checkbox>
      </van-submit-bar>
    </div>
    <template v-else>
    </template>
  </div>
</template>
<script>
import { mapGetters, mapState } from 'vuex'
import { getAdressById } from '../../api/adress'
import { Toast } from 'vant'

export default {
  data() {
    return {
      value: 1,
      goodslist: [],
      NOaddress: true,
      address: {},
      flag: false,
      checked: true
    }
  },
  watch: {
    checked(newVal) {
      this.$store.commit('cart/SELECE_ALL_CHECKOUT', newVal)
    }
  },
  computed: {
    ...mapGetters({
      // allchecked: 'cart/allchecked',
      total: 'cart/total',
      allnum: 'cart/allnum'
    }),
    // ...mapState('cart', ['cart']),
    ...mapState({
      cart: state => state.cart.cart
    }),
    allchecked: {
      get() {
        // return console.log(this.$store.getters)
        return this.$store.getters['cart/allchecked']
      },
      set(val) {
        console.log(val)
      }
    }
  },
  methods: {
    async load() {
      const { userid } = JSON.parse(localStorage.userlist)
      const adress = await getAdressById(userid)
      const trueadress = adress.data.filter(item => {
        return item.isDefault
      })
      if (trueadress.length >= 1) {
        this.address = trueadress[0]
        this.NOaddress = true
      } else {
        this.NOaddress = false
      }
      const usergoods = this.cart.filter(item => {
        return item.userid === userid
      })
      this.goodslist = usergoods
    },
    onSubmit() {
      this.$store.commit('cart/setstatusone')
      this.flag = true
    },
    OK() {
      this.$store.commit('cart/setstatusthree')
      this.$router.push('/myorder')
      Toast('支付成功')
    },
    newscount(value, id) {
      this.$store.commit({
        type: 'cart/newscount',
        payload: {
          value: value,
          id: id.name
        }
      })
    }
  },
  created() {
    this.load()
  }
}
</script>
<style lang="scss">
.cart {
  .big_box {
    margin-bottom: 100px;

    .goods_box {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fafafa;
      padding: 5px;
      box-sizing: border-box;
      margin: 10px 0;

      .btnlist {
        flex: 0.5;
        justify-content: center;
      }

      .slice {
        flex: 3.5;
        position: relative;
        padding: 5px 0;

        .van-card__title {
          font-size: 14px;
          width: 220px;
          display: block;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        .van-card__desc {
          width: 200px;
          font-size: 14px;
          margin-top: 10px;
        }

        .van-card__price {
          font-size: 14px;
          color: red;
        }

        .van-card__footer {
          display: inline-block;
          position: absolute;
          top: 70px;
          right: 40px;
        }
      }
    }
  }

  .gobuy {
    text-align: center;
    margin-top: 100px;
    line-height: 50px;

    .van-button {
      width: 200px;
      margin: auto;
    }
  }

  .van-submit-bar {
    margin-bottom: 50px;
  }

  .bot_box {
    position: fixed;
    z-index: 100000;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);

    .black_whitebox {
      position: absolute;
      bottom: 0;
      left: 0;
      background-color: #fff;
      border-radius: 20px;
      width: 100%;
      height: 300px;
      padding: 20px 10px 30px 10px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .address {
        display: flex;
        justify-content: space-around;

        .details_box {
          font-size: 15px;

          i {
            font-style: normal;
            color: red;
            font-size: 14px;
            font-weight: bold;
          }
        }

        .goaddress {
          line-height: 32px;
        }
      }

      .total_num {
        padding: 0 10px;
        font-size: 14px;

        i {
          font-style: normal;
          color: red;
          font-size: 15px;
          font-weight: bold;
        }
      }

      .lastbtn {
        .out_box {
          position: absolute;
          background-color: #fff;
          border: 1px solid transparent;
          border-radius: 50%;
          top: 6px;
          right: 10px;
          font-size: 20px;
        }
      }
    }

    .fly-enter,
    .fly-leave-to {
      opacity: 0;
      transform: translateY(300px);
    }

    .fly-leave-active,
    .fly-enter-active {
      transition: all 0.3s linear;
    }
  }
}
</style>
